<template>
  <div>
    <el-tag
  :key="tag.id"
  v-for="tag in dynamicTags"
  closable
  @close="handleClose(tag)"
  :disable-transitions="false">
  {{tag}}
</el-tag>
<el-button v-if="isDialog" class="button-new-tag"  @click="showOrgTree">+ 选择{{name}}组织</el-button>
<el-dialog title="组织信息" :visible.sync="dialogVisible" :modal="false" :modal-append-to-body="false">
    <el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
  <el-tree ref="org_Tree" :data= "orgData" :filter-node-method="filterNode" :show-checkbox="showCheckbox" node-key="id" 
  :check-strictly="dataCheckStrictly"
  :default-expand-all="dea"
  :props="defaultProps"
  :isDialog="isDialog"
  @check-change="handleCheckChange"
  :highlight-current=true >
  </el-tree>
</el-dialog>
<el-input v-if="!isDialog"
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
 <el-tree v-if="!isDialog" ref="org_Tree" :data= "orgData" :filter-node-method="filterNode" :show-checkbox="showCheckbox" node-key="id" 
  :check-strictly="checkStrictly"
  :default-expand-all="dea"
  :props="defaultProps"
  :isDialog="isDialog"
  @check-change="handleCheckChange"
  :highlight-current=true >
  </el-tree>
  </div>
</template>

<script>
import { orgTree } from "@/api/org";
import vue from "vue";
export default {
  props: {
    dcksValue: [Array], //生成组织树时默认勾选的节点的值，传入类型为数组
    dcksLabel: [Array], //生成组织树时默认勾选的节点的描述，传入类型为数组
    checkStrictly: {
      type: Boolean,
      default: true
    }, //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false;如果关联则组织树默认为全展开，不关联则不展开
    isDialog: {
      type: Boolean,
      default: true
    }, //是否作为弹出框显示
    name, //弹出按钮名称
    isMultiple: {
      type: Boolean,
      default: true
    }, //是否可以多选 默认为多选
    showCheckbox: {
      type: Boolean,
      default: true
    }//节点是否可编辑
  },
  data() {
    return {
        filterText: "",
      i: 0,
      orgData: [], //初始化树的数据
      cksValue: [],
      cksLabel: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      dynamicTags: {
        type: Array,
        default: []
      },
      dataCheckStrictly: this.checkStrictly,
      dialogVisible: false,
      dea: false //是否展开组织树
    };
  },
  async created() {
    // console.log("orgTree.created");
    if (!this.isMultiple) {
      this.dataCheckStrictly = true;
    }
    if (!this.dataCheckStrictly) {
      this.dea = true;
    }
    if (!this.isDialog) {
    //   console.log("orgTree.isNotDialog");
      await this.getOrgData();
      await this.$refs.org_Tree.setCheckedKeys(this.dcksValue);
      this.cksLabel = this.dcksLabel;
    }
    this.dynamicTags = this.dcksLabel;
  },
  methods: {
       filterNode(value, data) {
    //   console.log("value", value);
    //   console.log("data", data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    //   console.log("data", data);
    //   console.log("value", value);
    },
    showOrgTree() {
      this.dialogVisible = true;
      this.orgTreeInit();
    },
    handleClose(tag) {
      this.cksValue = this.dcksValue;
      this.cksLabel = this.dcksLabel;
      for (const node of this.$refs.org_Tree.getCheckedNodes()) {
        if (tag == node.label) {
          const idIndex = this.cksValue.indexOf(node.id);
          this.cksValue.splice(idIndex, 1);
          this.cksLabel.splice(idIndex, 1);
        }
      }
      this.dynamicTags = this.cksLabel;
      this.$emit("update:dcksLabel", this.cksLabel);
      this.$emit("update:dcksValue", this.cksValue);
      this.$refs.org_Tree.setCheckedKeys(this.cksValue);
    },

    /**
     * 获取树的data值
     */
    async getOrgData() {
      this.$store.dispatch("openLoading");
      orgTree().then(response => {
        this.orgData = response.data.items;
        // console.log("this.orgData",this.orgData);
      });
      this.$store.dispatch("closeLoading");
    },

    /**
     * 重新获取树的data值，并根据父页面传过来的值初始化勾选状态
     */
    async orgTreeInit() {
    //   console.log("orgTreeInit");
      await this.getOrgData();
      vue.nextTick(_ => {
        this.$refs.org_Tree.setCheckedKeys(this.dcksValue);
      });
      this.cksLabel = this.dcksLabel;
      this.dynamicTags = this.dcksLabel;
    },
    /**
     * 树节点勾选状态变更时，更改tag内容
     */
    handleCheckChange(node, isChecked, isClildChecked) {
      this.i++;
    //   console.log("handleCheckChange.i", this.i);
    //   console.log("handleCheckChange.node", node);
    //   console.log("handleCheckChange.isChecked", isChecked);
    //   console.log("handleCheckChange.dynamicTags1", this.dynamicTags);
      if (this.isMultiple) {
        this.cksValue = this.dcksValue;
        this.cksLabel = this.dcksLabel;
        if (!this.dynamicTags.includes(node.label) && isChecked) {
          this.$refs.org_Tree.setCurrentNode(node);
          this.cksValue.push(node.id);
          this.cksLabel.push(node.label);
        } else if (this.dynamicTags.includes(node.label) && !isChecked) {
          const idIndex = this.cksValue.indexOf(node.id);
          this.cksValue.splice(idIndex, 1);
          this.cksLabel.splice(idIndex, 1);
        }
        this.dynamicTags = this.cksLabel;
        this.$emit("update:dcksLabel", this.cksLabel);
        this.$emit("update:dcksValue", this.cksValue);
      } else {
        if (this.i % 2 == 0) {
          if (isChecked) {
            this.cksValue = [];
            this.cksLabel = [];
            this.$refs.org_Tree.setCheckedNodes([]);
            this.$refs.org_Tree.setCheckedNodes([node]);
            this.cksValue.push(node.id);
            this.cksLabel.push(node.label);
          } else if (!isChecked) {
            this.$refs.org_Tree.setCheckedNodes([]);
            this.cksValue = [];
            this.cksLabel = [];
          }
        } else if (isChecked) {
          this.cksValue = [];
          this.cksLabel = [];
          this.$refs.org_Tree.setCheckedNodes([node]);
          this.cksValue.push(node.id);
          this.cksLabel.push(node.label);
        }
        // console.log("handleCheckChange.this.cksLabel", this.cksLabel);
        // console.log("handleCheckChange. this.cksValue", this.cksValue);
        this.dynamicTags = this.cksLabel;
        this.$emit("update:dcksLabel", this.cksLabel);
        this.$emit("update:dcksValue", this.cksValue);
      }
    //   console.log("handleCheckChange.dynamicTags2", this.dynamicTags);
    }
  },
  watch: {
    dcksValue(curVal, oldVal) {
    //   console.log("watch.dcks", curVal, oldVal);
      if (curVal != oldVal) {
        this.orgTreeInit();
      }
    },
     filterText(val) {
        // console.log("filterText",val);
      this.$refs.org_Tree.filter(val);
    }
  }
};
</script>
